<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>放大镜</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        #smallImg{
            width: 300px;
            height: 400px;
            background-image: url("img/0010.jpg");
            background-size: cover;
        }
        #smallDiv{
            width: 100px;
            height: 100px;
            background: rgba(255,0,0,.2);
            display: none;
            position: absolute;
        }
        #bigDiv{
            width: 300px;
            height: 400px;
            position: absolute;
            left: 300px;
            top: 0px;
            overflow: hidden;
            display: none;
            border:1px solid red;
        }

        #bigImg{
            width: 900px;
            height: 1200px;
            position: absolute;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div id="smallImg">
        <div id="smallDiv"></div>
    </div>

    <div id="bigDiv">
        <img src="img/0010.jpg" alt="" id="bigImg">
<!--        <img src="img/13yi.jpg" alt="" id="bigImg">-->
    </div>
</div>
<script>
    // 1.鼠标移入，出现小div（遮挡层）和大div（展示效果区域）
    // 鼠标移出，隐藏小div、大div
    let smallImg = document.getElementById("smallImg");
    let smallDiv = document.getElementById("smallDiv");
    let bigDiv = document.getElementById("bigDiv");
    let bigImg = document.getElementById("bigImg");

    smallImg.onmouseover=function () {
        smallDiv.style.display = 'block';
        bigDiv.style.display='block'
    }
    smallImg.onmouseout=function () {
        smallDiv.style.display = 'none';
        bigDiv.style.display='none'
    }

    smallImg.onmousemove=function (e1) {
        // var e=e||window.event;
        var e=e1
        console.log(e.clientX,e.clientY)

        var x=e.clientX-50;
        var y=e.clientY-50;
        if (x >= 200) {
            x=200;
        }
        if(x<=0){
            x=0;
        }
        if(y>=300){
            y=300;
        }
        if(y<=0){
            y=0;
        }

        // 2.小div移动方向和大图移动方向是相反的
        // 2.1 先完成鼠标绑定遮挡层
        // 鼠标移动距离大于 遮挡层的移动距离
        // 2.2 把小div和大图移动 OK

        // 3.核心：整个放大镜功能存在一个比例
        //    小div/小图 = 大div/大图
        //    100 / 300  = 300 / 900
        // 分析：尺寸大小——>结论：3倍——>才是移动的距离

        smallDiv.style.left=x+'px'
        smallDiv.style.top=y+'px'
        bigImg.style.left=-3*x+'px'
        bigImg.style.top=-3*y+'px'
    }

</script>
</body>
</html>